<template>
  <div class="function-config">
    <el-dialog
      :visible.sync="isShow"
      @close="triggerClose"
      :close-on-click-modal="false"
      @opened="triggerOpen"
      width="70%"
    >
      <div style="height:645px;overflow-y:auto">
        <el-row style="margin-top: 10px;">
          <el-button @click="add" type="primary">
            <i class="el-icon-plus"></i> 加入文件列表
          </el-button>
        </el-row>
        <el-table
          class="table"
          border
          ref="multipleTable"
          :data="tables"
          tooltip-effect="dark"
          style="width: 100%"
          height="532"
          :show-overflow-tooltip="true"
          @selection-change="handleSelectionChange"
          :header-cell-style="{background:tableHeaderBGC}"
        >
          <el-table-column align="center" type="selection" width="60"></el-table-column>
          <!-- <el-table-column type="index" :label="$t('cm.no')" align="center" width="60"></el-table-column> -->
          <el-table-column prop="contractNo" :label="$t('pur.contract_no')" align="center" width="150"></el-table-column>
          <el-table-column prop="contractName" :label="$t('pur.contract_name')" align="center" width="150"></el-table-column>
          <el-table-column prop="serialNumber" :label="$t('pur.serial_number')" align="center" width="150"></el-table-column>
          <el-table-column prop="project" :label="$t('pur.contract_item_project')" align="center" width="160"></el-table-column>
          <el-table-column prop="serviceName" :label="$t('pur.service_name')" align="center" width="150"></el-table-column>
          <el-table-column prop="specification" :label="$t('pur.specification')" align="center"></el-table-column>
          <el-table-column prop="num" :label="$t('pur.contract_item_num')" align="center" width="80"></el-table-column>
          <el-table-column prop="unit" :label="$t('pur.contract_item_unit')" align="center" width="80"></el-table-column>
          <el-table-column prop="currency" :label="$t('pur.currency')" align="center" width="60" :formatter="formatTableText"></el-table-column>
          <el-table-column prop="amountMoney" :label="$t('pur.properAmount')" align="center" width="60"></el-table-column>
          <el-table-column prop="requiredArrivalTime" :label="$t('pur.contract_arrival_time')" align="center" width="100" :formatter="formatTableText"></el-table-column>
          <el-table-column prop="plannedCompletionTime" :label="$t('pur.plannedCompletionTime')" align="center" width="100" :formatter="formatTableText"></el-table-column>
        </el-table>
        <div class="block pager-customer">
          <el-pagination
            background
            layout="total, slot, prev"
            :current-page.sync="pagingCurrentPageNum"
            :page-sizes="pagingPageSizes"
            :page-size="pagingPageSize"
            :total="pagingTotal"
            @size-change="pagingHandleSizeChange"
            @current-change="pagingHandleCurrentChange"
          >
            <el-button
              ref="firstPage"
              @click="firstPage"
              class="first-page"
              :disabled="firstPageDisabled"
            >{{$t('cm.firstPage')}}</el-button>
          </el-pagination>
          <el-pagination
            background
            layout="pager, next, slot, jumper"
            :current-page.sync="pagingCurrentPageNum"
            :page-sizes="pagingPageSizes"
            :page-size="pagingPageSize"
            :total="pagingTotal"
            @size-change="pagingHandleSizeChange"
            @current-change="pagingHandleCurrentChange"
          >
            <el-button
              ref="lastPage"
              @click="lastPage"
              class="last-pager"
              :disabled="lastPageDisabled"
            >{{$t('cm.lastPage')}}</el-button>
          </el-pagination>
        </div>
      </div>
      <div slot="title" class="dialog-edit-head">
        <i>合同物项列表</i>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as Constant from '@/utils/constant'
import { mapState, mapActions, mapGetters } from 'vuex'
import {dateFtt} from '@/utils/datetime'
import Pagination from '@/mixins/Pagination'
import api_pur from '@/api/api_pur'
export default {
  /**
   *  文件列表
   */
  name: 'PurProcessDemWithinFileList',
  props: {
    fileListDislogVisible: {
      type: Boolean,
      default: false
    }
  },
  mixins: [Pagination],
  data () {
    return {
      isShow: this.fileListDislogVisible,
      tables:[]
    }
  },
  created () {
    // this.getAllDataTable()
  },
  methods: {
    triggerOpen () { // 打开dislog
     this.getAllDataTable()
    },
    triggerClose () { // 关闭dislog
    },
    getAllDataTable () {
      this.queryTableList({
        pageNum: this.pagingCurrentPageNum,
        pageSize: this.pagingPageSize
      })
    },
    //统一与后台操作的方法
    queryTableList (params) {
      //这里的params是对象
      //注意 如果后台json转对象 时间类型好像会抛异常  转到后台 前台用 qs 来转换数据 设置一个全局拦截器 main.js 参考
      let _this = this
      let tables = []
      let totalCount = 0
      api_pur.purContractItemLoadByPaging(params, result => {
        if (result.code === Constant.RT_SUCCESS) {
          //表格数据  数组            
          tables = result.data.results
          //分页数据
          totalCount = result.data.totalRows
        } else {
          // _this.$t('cm.tips')
          ALERT.error(result.data.msg)
        }
        _this.setPagingTotal(totalCount)
        this.tables = tables
      })
    },
    formatTableText (row, column, cellValue, index) {
      var fmtValue = null
      if (column.property=== 'requiredArrivalTime') {
        fmtValue = dateFtt('yyyy-MM-dd', row.requiredArrivalTime)
      } else if (column.property=== 'plannedCompletionTime') {
        fmtValue = dateFtt('yyyy-MM-dd', row.plannedCompletionTime)
      } else if (column.property=== 'currency') {
        fmtValue = this.currencyMap[row.currency]
      }
      return fmtValue !== null && fmtValue !== undefined ? fmtValue : cellValue
    },
    add () {
      if (this.multipleSelection.length > 0) {
        this.$emit('addFileList', this.multipleSelection)
      } else {
        ALERT.warn('请选择数据')
      }
    }
  },
  watch: {
    fileListDislogVisible: {
      immediate: true,
      handler () {
        this.isShow = this.fileListDislogVisible
      }
    },
    isShow () {
      if (!this.isShow) {
        this.$emit('closeFileListDislog')
      } else {
      }
    }
  },
  computed: {
    ...mapState({
      tableHeaderBGC: state => state.common.tableHeaderBGC
    }),
    ...mapGetters({
      currencyMap: 'dict/currencyMap'
    })
  }
}
</script>
<style lang="scss">

</style>
